<template>
  <Dialog
    :title="title"
    :fullscreen="true"
    :model-value="visible"
    width="700px"
    maxHeight="380px"
    :before-close="closeForm"
  >
    <Form
      :schema="schema"
      :model="dept"
      @register="formRegister"
      label-width="120px"
      :isCol="false"
      :rules="rules"
    />
    <template #footer>
      <el-space style="text-align: center">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-space>
    </template>
  </Dialog>
</template>

<script>
import { Add } from '@/api/opt/opMenu'
import { Form } from '@/components/Form'
import { Dialog } from '@/components/Dialog'
import { HrItemDic } from '@/config/publicDic'
import { useForm } from '@/hooks/web/useForm'
const { formRegister, formMethods } = useForm()
export default {
  components: {
    Form,
    Dialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      menu: {},
      rules: {
        Title: [
          {
            required: true,
            message: '权限名称不能为空！',
            trigger: 'blur'
          }
        ],
        RoutePath: [
          {
            required: true,
            message: '访问路径不能为空！',
            trigger: 'blur'
          }
        ],
        BusType: [
          {
            required: true,
            message: '业务类型不能为空！',
            trigger: 'blur'
          }
        ]
      },
      schema: [
        {
          field: 'Title',
          label: '权限名称',
          component: 'Input',
          componentProps: {
            maxlength: 100,
            placeholder: '权限名称'
          }
        },
        {
          field: 'RoutePath',
          label: '访问路径',
          component: 'Input',
          componentProps: {
            maxlength: 500,
            placeholder: '访问路径'
          }
        },
        {
          field: 'BusType',
          label: '业务类型',
          component: 'DicItem',
          componentProps: {
            dicId: HrItemDic.OperateBusType,
            placeholder: '业务类型'
          }
        }
      ]
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    formRegister,
    async save() {
      const data = await formMethods.validate()
      if (data == null) {
        return
      }
      this.add(data)
    },
    async add(data) {
      await Add(data)
      this.$message({
        message: '添加成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    reset() {
      this.menu = {
        Title: null,
        RoutePath: null,
        BusType: null
      }
      formMethods.setValues(this.menu)
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    resetForm() {
      this.menu = {
        Title: null,
        RoutePath: null,
        BusType: null
      }
      formMethods.setValues(this.menu)
    }
  }
}
</script>
